<template>
  <div class="space-y-3" aria-label="辅助面板容器">
    <div class="text-sm text-gray-500">辅助面板</div>
    <!-- Tabs -->
    <div role="tablist" aria-label="辅助面板模块" class="flex gap-2 text-sm border-b">
      <button
        v-for="t in tabs"
        :key="t.key"
        role="tab"
        :aria-selected="currentTab === t.key"
        class="px-3 py-2 -mb-px rounded-t hover:bg-gray-50"
        :class="currentTab === t.key ? 'border-b-2 border-primary text-primary' : 'text-gray-600'"
        @click="currentTab = t.key"
      >
        {{ t.label }}
      </button>
    </div>

    <!-- Panels -->
    <div role="tabpanel" v-if="currentTab === 'properties'" class="space-y-3">
      <div class="text-sm text-gray-700">属性概览</div>
      <div class="rounded-card border shadow-card bg-white p-3 text-sm text-gray-600">
        - 在库页显示选中卡片的基本信息与快捷操作（编辑/导出）
      </div>
    </div>

    <div role="tabpanel" v-else-if="currentTab === 'variables'" class="space-y-3">
      <div class="flex items-center justify-between">
        <div class="text-sm text-gray-700">变量</div>
        <div v-if="editor && editor.isEditing" class="text-xs text-gray-400">编辑器模式</div>
      </div>
      <div v-if="editor" class="rounded-card border shadow-card bg-white p-2 text-sm">
        <div v-if="editor.formData.variables.length === 0" class="text-gray-500 p-3">暂无变量</div>
        <ul v-else class="divide-y">
          <li v-for="(v, i) in editor.formData.variables" :key="`side-var-${i}`" class="flex items-center justify-between py-2 px-2">
            <div class="min-w-0">
              <div class="font-mono text-gray-800 truncate">{ {{ v.name }} }</div>
              <div class="text-xs text-gray-500 truncate">{{ v.type }} · {{ v.example || '无示例' }}</div>
            </div>
            <div class="flex items-center gap-2">
              <button class="px-2 py-1 rounded-btn border text-xs hover:bg-gray-50" @click="insert(v.name, 'system')" title="插入到 System">插入S</button>
              <button class="px-2 py-1 rounded-btn border text-xs hover:bg-gray-50" @click="insert(v.name, 'user')" title="插入到 User">插入U</button>
            </div>
          </li>
        </ul>
      </div>
      <div v-else class="rounded-card border shadow-card bg-white p-3 text-sm text-gray-500">在编辑器页可查看并插入变量</div>
    </div>

    <div role="tabpanel" v-else-if="currentTab === 'versions'" class="space-y-3">
      <div class="text-sm text-gray-700">版本历史</div>
      <div class="rounded-card border shadow-card bg-white p-3 text-sm text-gray-600">
        - 查看版本时间线与差异；下一步加入对比与回滚入口
      </div>
    </div>

    <div role="tabpanel" v-else-if="currentTab === 'tests'" class="space-y-3">
      <div class="text-sm text-gray-700">测试集</div>
      <div class="rounded-card border shadow-card bg-white p-3 text-sm text-gray-600">
        - 管理测试用例与快速测试；将复用编辑器测试对话框
      </div>
    </div>

    <div role="tabpanel" v-else-if="currentTab === 'approvals'" class="space-y-3">
      <div class="text-sm text-gray-700">审批</div>
      <div class="rounded-card border shadow-card bg-white p-3 text-sm text-gray-600">
        - 查看/提交审批与历史记录；后续加入权限守卫与二次确认
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, inject } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'AssistantPanel',
  setup() {
    const editor = inject<any>('editorState', null)

    const tabs = [
      { key: 'properties', label: '属性' },
      { key: 'variables', label: '变量' },
      { key: 'versions', label: '版本' },
      { key: 'tests', label: '测试集' },
      { key: 'approvals', label: '审批' },
    ] as const

    const route = useRoute()
    // 根据页面上下文设置默认 Tab：编辑器优先显示变量；其他显示属性
    const currentTab = ref<'properties'|'variables'|'versions'|'tests'|'approvals'>(
      route.path.includes('/editor') ? 'variables' : 'properties'
    )

    function insert(name: string, where: 'system'|'user') {
      if (!editor || !editor.insertVariable) return
      editor.insertVariable(where, `{${name}}`)
    }

    return { tabs, currentTab, editor, insert }
  }
})
</script>